<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
     <!-- 引入Vue 全局注册一个名为Vue的构造函数 -->
 <script src="./js/vue.js"></script>
 <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <title>插槽</title>
</head>
<body>
    <div id="app">
       <todo>
        <todo-title slot="todo-title" v-bind:title="title"></todo-title>
        <todo-items slot="todo-items" v-for="(item,index) in items" v-bind:item="item" v-bind:index="index" v-on:remove="removeItems"></todo-items>
       </todo>
    </div>
     <!-- <div>
      
        <slot name=""></slot>
        <ul>
           <slot name=""></slot>
        </ul>
     </div> -->
    <script>
        Vue.component("todo",
        {template:'<div> <slot name=\'todo-title\'></slot><ul> <slot name=\'todo-items\'></slot></ul></div>'
        });
        // 定义待办事项-标题 组件
        Vue.component("todo-title",{
            props:['title'],
            template:"<div>{{title}}</div>"
        })
        //定义待办事项-内容 组件
        Vue.component("todo-items",{
            props:['item','index'],
            template:"<li>{{index}}--{{item}}<button @click='remove'>删除</button></li>",
            methods:{
                //自定义事件
             remove:function(){
                this.$emit("remove")
             }
            }
        })
        var app=new Vue({
            el:"#app",
           data:{
            title:'标题',
            items:["古力娜扎","迪丽热巴","马儿扎哈"]
           },
           methods:{
            removeItems:function(index){
                this.items.splice(index,1)
            }
           }
        })
    </script>
</body>
</html>